<template>
  <view class="promotion-layout">
    <my-header title="我的推广" fit-weixin>
      <template v-slot:menu>
        <image
          class="promotion-rule"
          style="width: 56rpx; height: 56rpx"
          src="https://www.dingxians.cn/images/user/ic-rule.png"
          @click="header('/packageB/content/promotion')"
        ></image>
      </template>
    </my-header>
    <my-content class="content">
      <view v-if="(status == 0 || status == 3) && result_status" class="box_content">
        <view class="box">
          <view class="item">
            <view class="label">
              <view class="label_red">*</view>
              <view>姓名</view>
            </view>
            <input class="input" placeholder="请输入姓名" v-model="params.nickname" />
          </view>
          <view class="item">
            <view class="label">
              <view class="label_red">*</view>
              <view>手机号</view>
            </view>
            <input type="number" class="input" placeholder="请输入手机号" v-model="params.mobile" />
          </view>
        </view>
        <view style="flex: 1"></view>
        <view class="agree_box">
          <image
            @click="changeAgree()"
            v-if="agreeStatus"
            class="agree_icon"
            src="https://www.dingxians.cn/images/common/selected.png"
          ></image>
          <image
            @click="changeAgree()"
            v-else
            class="agree_icon"
            src="https://www.dingxians.cn/images/common/unselected.png"
          ></image>
          <view class="agree_title">
            我已阅读并同意
            <text class="agree_text" @click="header('/packageB/content/promotion')">《推广员协议及规则》</text>
          </view>
        </view>
        <view class="submit" @click="submit()">提交申请</view>
      </view>

      <view v-if="status == 1 && result_status" class="box_content">
        <view class="box">
          <view class="item">
            <view class="label">
              <view class="label_red">*</view>
              <view>姓名</view>
            </view>
            <input class="input" disabled placeholder="请输入姓名" v-model="params.nickname" />
          </view>
          <view class="item">
            <view class="label">
              <view class="label_red">*</view>
              <view>手机号</view>
            </view>
            <input type="number" disabled class="input" placeholder="请输入手机号" v-model="params.mobile" />
          </view>
        </view>
        <view class="submit ing">正在审核中</view>
      </view>

      <view v-if="status == 2 && result_status" class="panel_box">
        <view class="top">
          <view class="panel">
            <view class="header">
              <view class="header_item">
                <view class="value">{{ commissionData.total_commission }}</view>
                <view class="label">累计佣金</view>
              </view>
              <view class="header_item">
                <view class="value">{{ commissionData.commission }}</view>
                <view class="label">可提现</view>
              </view>
              <view class="header_item">
                <view class="value">{{ commissionData.cashed_commission }}</view>
                <view class="label">已提现</view>
              </view>
            </view>

            <view class="cash_btn_group">
              <view @click="showCash()" class="cash_btn1">提现</view>
              <view class="cash_btn" @click="header('/pages/user/withdraw')">
                提现记录
                <image
                  style="width: 22rpx; height: 22rpx; vertical-align: middle"
                  src="https://www.dingxians.cn/images/common/arrow-right.png"
                  mode="scaleToFill"
                />
              </view>
            </view>
          </view>

          <view class="invite_box">
            <view class="invite_label">邀请链接</view>
            <view class="invite_value">
              <view class="invite_url">{{ commissionData.invite_link }}</view>
              <image
                @click="copyUrl(commissionData.invite_link)"
                mode="widthFix"
                class="copy"
                src="https://www.dingxians.cn/images/user/ic_copy.png"
              ></image>
            </view>
          </view>
        </view>

        <view class="commisson_box">
          <view class="commission_tab">
            <view
              @click="changeType(item.id)"
              :class="type == item.id ? 'active' : ''"
              class="commission_tab_item"
              v-for="item in tabData"
              :key="item.id"
            >
              {{ item.title }}
            </view>
          </view>
        </view>
        <scroll-view
          class="scroll"
          refresher-background=""
          :refresher-triggered="refreshStatus"
          @refresherrefresh="refresh"
          :refresher-enabled="true"
          scroll-y="true"
          @scrolltolower="lower"
        >
          <view class="commission" v-if="commissionList.length > 0">
            <view class="commission_item" v-for="item in commissionList" :key="item.id">
              <view class="left">
                <image :src="item.avatar" class="avatar"></image>
                <view class="user">
                  <view>{{ item.nickname }}</view>
                  <view style="color: #808080; margin-top: 10rpx">id:{{ item.child_id }}</view>
                </view>
              </view>

              <view class="right">
                <view class="commission_amount">充值：{{ item.amount }} 佣金：{{ item.commission }}</view>
                <view class="time">{{ item.created_at }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <uni-popup ref="popup" v-show="popStatus">
        <view class="pop_box">
          <view class="pop_header">提现</view>
          <view class="form">
            <input class="form_input" v-model="cashParams.nickname" placeholder="收款人姓名:" />
            <input type="number" class="form_input" v-model="cashParams.amount" placeholder="提现金额:" />
            <view class="form_image_box">
              <view class="form_tip">收款码：请上传固定收款码</view>
              <view @click="upload()" class="upload" v-if="!cashParams.image"></view>
              <image v-else class="upload image" :src="cashParams.image"></image>
            </view>
          </view>
          <view v-if="!cashStatus" class="give_btn give_confirm" @click="cash()">提交申请</view>
          <view v-else class="give_btn give_cancel">提交申请</view>
        </view>
      </uni-popup>
    </my-content>
  </view>
</template>

<script>
import api from '../../api/index.js'
import request from '../../api/request.js'
export default {
  data() {
    return {
      params: {
        nickname: '',
        mobile: '',
      },
      agreeStatus: false,
      status: 0,
      result_status: false,
      commissionData: {},

      tabData: [
        { id: 1, title: '直推' },
        { id: 2, title: '间推' },
      ],
      type: 1,
      commissionList: [],
      page: 1,
      last_page: 1,
      refreshStatus: false,
      cashParams: {
        nickname: '',
        amount: '',
        image: '',
      },
      popStatus: false,
      token: '',
      cashStatus: false,
    }
  },
  onLoad(option) {
    this.getCommission()
  },
  onShow() {
    this.token = uni.getStorageSync('token')
    this.getData()
  },

  methods: {
    upload(e) {
      var count = 1
      uni.chooseImage({
        count: count,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          var tempFilePaths = res.tempFilePaths
          uni.showLoading({
            title: '图片上传中',
            mask: true,
          })
          for (var x = 0; x < res.tempFilePaths.length; x++) {
            uni.uploadFile({
              url: `${request.url}common/upload?token=${this.token}`,
              name: 'file',
              filePath: res.tempFilePaths[x],
              success: (r) => {
                uni.hideLoading()
                var data = JSON.parse(r.data)
                this.cashParams.image = data.data.url
              },
            })
          }
        },
        error: (res) => {
          console.log(res)
        },
      })
    },
    showCash() {
      this.popStatus = true
      this.$refs.popup.open('center')
    },
    cash() {
      if (!this.cashParams.amount || this.cashParams.amount <= 0) {
        this.show('请输入有效的提现金额')
        return
      }
      if (!this.cashParams.nickname) {
        this.show('请输入收款人姓名')
        return
      }
      if (!this.cashParams.image) {
        this.show('请上传收款码')
        return
      }
      if (!this.cashParams.amount) {
        this.show('请输入提现金额')
        return
      }
      if (this.cashParams.amount > this.commissionData.commission) {
        this.show('余额不足')
        return
      }
      uni.showLoading({
        title: '提交中',
      })
      this.cashStatus = true
      api.userWithdraws
        .store(this.cashParams)
        .then((res) => {
          uni.hideLoading()
          if (res.code === 200) {
            this.show('提交成功')
            this.cashStatus = false
            this.popStatus = false
            this.$refs.popup.close()
            this.getData()
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    copyUrl(url) {
      uni.setClipboardData({
        data: url.toString(),
        success: () => {
          this.show('链接已复制')
        },
        fail: () => {},
      })
    },
    changeType(type) {
      if (this.type != type) {
        this.type = type
        this.refresh()
      }
    },
    changeAgree() {
      this.agreeStatus = !this.agreeStatus
    },
    getData() {
      uni.showLoading({
        title: '数据加载中',
      })
      api.userPromotions
        .index()
        .then((res) => {
          uni.hideLoading()

          if (res.code === 200) {
            this.result_status = true
            this.status = res.data.status
            if (this.status == 1) {
              this.params = res.data.data.user_promotion
            }
            console.log(res.data.data)
            this.commissionData = res.data.data.commission_data
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    getCommission(type) {
      uni.showLoading({
        title: '数据加载中',
      })
      api.userCommissions
        .index({ page: this.page, type: this.type })
        .then((res) => {
          uni.hideLoading()
          this.refreshStatus = false
          if (res.code === 200) {
            if (type == 1) {
              this.commissionList = this.commissionList.concat(res.data.data)
            } else {
              this.commissionList = res.data.data
            }
            console.log(this.commissionList)
            this.last_page = res.data.last_page
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    lower() {
      if (this.page >= this.last_page) {
        this.show('没有更多数据了')
        return
      }
      this.page++
      this.getCommission(1)
    },
    refresh() {
      this.refreshStatus = true
      this.page = 1
      this.getCommission(2)
    },
    submit() {
      if (!this.agreeStatus) {
        this.show('请阅读并同意推广员协议及规则')
        return
      }
      if (!this.params.nickname || !this.params.mobile) {
        this.show('请完善表单')
        return
      }
      if (this.params.mobile.length != 11) {
        this.show('请输入正确的手机号')
        return
      }
      uni.showLoading({
        title: '提交中',
      })
      api.userPromotions
        .store(this.params)
        .then((res) => {
          uni.hideLoading()
          if (res.code === 200) {
            this.show(res.msg)
            setTimeout(() => {
              uni.navigateBack()
            }, 1000)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.promotion-layout {
  height: 100vh;
  background-color: #141414;

}
.content {
  height: 100vh;
  background-color: #141414;

  .panel_box {
    display: flex;
    flex-direction: column;
    height: 100%;

    .top {
      background-image: url('https://www.dingxians.cn/upload/user_static/user/bg-promotion.png');
      background-size: 100% 100%;
      margin: 30rpx 20rpx 20rpx;
    }

    .panel {
      display: flex;
      flex-direction: column;
      padding: 80rpx 0;
      color: white;
      margin: 30rpx;
      .header {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 50rpx;

        .header_item {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 30rpx;
          .label {
            margin: 10rpx 0;
            font-size: 26rpx;
            color: #D1D1D1;
          }
          .value {
            font-size: 40rpx;
            font-weight: bold;
          }
        }
      }

      .cash_btn_group {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        width: 100%;
        margin: 40rpx 0 20rpx 0;
        justify-content: flex-end;

        .cash_btn1 {
          width: 164rpx;
          height: 60rpx;
          line-height: 60rpx;
          font-family: 'youshe',serif;
          text-align: center;
          font-size: 36rpx;
          margin-right: 80rpx;
          background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary-small.png');
          background-size: 100% 100%;
        }

        .cash_btn {
          /* border-radius: 10rpx; */
          /*  width: 180rpx;
          height: 50rpx;
          line-height: 50rpx; */
          color: #fff;
          text-align: center;
          margin: 0 20rpx;
          margin-right: 50rpx;
        }
      }
    }

    .invite_box {
      display: flex;
      flex-direction: column;
      padding: 20rpx;
      color: white;
      .invite_label {
        font-size: 32rpx;
        margin-bottom: 20rpx;
        margin-left: 20rpx;
      }
      .invite_value {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #1f1f1f;
        padding: 24rpx 28rpx;
        .invite_url {
          font-size: 24rpx;
          margin-right: 10rpx;
          color: #808080;
        }
        .copy {
          width: 32rpx;
          height: 32px;
        }
      }
    }

    .commisson_box {
      display: flex;
      flex-direction: column;
      margin-top: 20rpx;
      padding-top: 20rpx;
      color: white;

      .commission_tab {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 20rpx;
        .commission_tab_item {
          font-size: 26rpx;
          width: 307rpx;
          height: 46rpx;
          line-height: 46rpx;
          text-align: center;
          margin: 0 20rpx;
          color: #808080;
          &.active {
            background-image: url('https://www.dingxians.cn/upload/user_static/user/bg-tab-active.png');
            background-size: 100% 100%;
            color: #ded000;
          }
        }
      }
      .select_box {
        font-size: 24rpx;
        justify-content: flex-end;
        display: flex;
        align-items: center;
        margin: 10rpx 30rpx;
      }
    }

    .scroll {
      /* height: 900rpx; */
      /* height: 100%; */
      overflow: hidden;
      .commission {
        display: flex;
        flex-direction: column;
        padding: 20rpx 30rpx;
        .commission_item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 28rpx;
          margin-bottom: 20rpx;
          color: white;
          .left {
            display: flex;
            align-items: center;
            height: 100rpx;
            .avatar {
              width: 68rpx;
              height: 68rpx;
              border-radius: 50%;
              margin: 0 20rpx;
            }
            .user {
              font-size: 24rpx;
              display: flex;
              height: 100rpx;
              flex-direction: column;
              justify-content: center;
            }
          }
          .right {
            font-size: 24rpx;
            margin-right: 20rpx;
            height: 100rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .commission_amount {
              text-align: right;
              color: #ded000;
            }
            .time {
              text-align: right;
              color: #808080;
            }
          }
        }
      }
    }
  }

  .box_content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .box {
    display: flex;
    flex-direction: column;

    width: 670rpx;
    margin: 0 auto;
    /* height: 100%; */
    .item {
      display: flex;
      flex-direction: column;
      position: relative;
      .label {
        display: flex;
        align-items: center;
        color: white;
        .label_red {
          font-size: 36rpx;
          color: red;
          margin-right: 5rpx;
        }
      }
      &:first-child {
        margin-top: 60rpx;
      }
      .input {
        color: white;
        width: 670rpx;
        height: 76rpx;
        box-sizing: border-box;
        padding: 20rpx;
        margin: 20rpx 0;
        background-color: #1f1f1f;
        &.text {
          height: 300rpx;
        }
      }
      .num_box {
        bottom: 30rpx;
        position: absolute;
        right: 10rpx;
        .num {
          color: red;
        }
      }
    }
  }
  .agree_box {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    margin: 40rpx 0 20rpx 0;
    .agree_icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }
    .agree_title {
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      .agree_text {
        color: #ded000;
      }
    }
  }
  .submit {
    width: 610rpx;
    margin: 20rpx auto;
    height: 84rpx;
    line-height: 84rpx;
    text-align: center;
    color: #fff;
    background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary.png');
    background-size: 100% 100%;
    &.ing {
      filter: grayscale(1);
      color: #fff;
    }
  }

  .pop_box {
    background-color: #141414;
    display: flex;
    flex-direction: column;
    width: 710rpx;
    border-radius: 10rpx;
    .pop_header {
      margin: 20rpx auto 40rpx;
      color: white;
      font-weight: bold;
    }
    .form {
      display: flex;
      flex-direction: column;

      .form_input {
        color: white;
        width: 670rpx;
        margin: 0 auto 10rpx auto;
        padding: 0 20rpx;
        line-height: 76rpx;
        box-sizing: border-box;
        height: 76rpx;
        background-color: #1f1f1f;
        font-size: 28rpx;
      }

      .form_image_box {
        display: flex;
        flex-direction: column;
        font-size: 28rpx;
        color: #808080;
        width: 670rpx;
        margin: 0 auto;
        .form_tip {
          font-size: 24rpx;
          margin: 10rpx 0;
        }
        .upload {
          margin-top: 20rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 200rpx;
          height: 200rpx;
          background-image: url('https://www.dingxians.cn/images/user/ic_add.png');
          background-size: 100% 100%;
          font-size: 36rpx;
        }
      }
    }

    .give_btn {
      width: 610rpx;
      height: 84rpx;
      text-align: center;
      line-height: 84rpx;
      font-size: 30rpx;
      margin: 20rpx auto;
      background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary.png');
      background-size: 100% 100%;
      color: white;
      margin-top: 20rpx;
      &.give_cancel {
        filter: grayscale(1);
      }
      &.give_confirm {
      }
    }
  }
}
</style>
